<template>
	<div class="container">
		<el-row
			type="flex"
			class="row-bg chart"
			:style="{ height: scrollerHeight }"
		>
			<el-col :span="12" class="item chart_l">
				<div id="c1">
					<div class="water_title">已使用</div>
				</div>
			</el-col>
			<el-col :span="12" class="item">
				<div id="c3"></div>
			</el-col>
		</el-row>

		<el-row
			type="flex"
			class="row-bg chart"
			:style="{ height: scrollerHeight }"
		>
			<!--el-col :span="12" class="item chart_l">
				<div id="c3">
				</div>
			</!--el-col>
			-->
			<el-col :span="24" class="item">
				<div id="c4"></div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import { getStorStatic, getEveryStatic, getDepartCount, getDomainStatic, getWaterData } from '@/api/data-watch'
import { Liquid, Column, Bar, Donut } from '@antv/g2plot'
import ringPlot from 'components/chart/ringPlot.vue'
import { objSum } from '@/utils/base.js'
export default {
	name: 'dataWatch',
	components: { ringPlot },
	data () {
		return {
			org_code: null,
			waterVal: 5639,
			waterTotalVal: 10000,
			chartRingObj: {
				chartId: 'c3',
				data: [],
				title: '各科室存储使用容量',
			},
		}
	},
	computed: {
		scrollerHeight () {
			return `${ ( window.innerHeight - 165 ) / 2 }px`
		},
	},
	created () {
		this.org_code = this.$store.state.app.org_code
		console.log( this.$store.state.app.org_code );
	},
	mounted () {
		// this.getStorStatic()
		this.getEveryStatic()
		// this.getDomainStatic()
		this.getDepartCount()
	},
	methods: {
		getStorStatic () {
			// 查询存储量-- 水波图
			getWaterData().then( res => {
				let num = ( res.data.used_size / 1024 ).toFixed( 2 ) * 1
				this.getWaterChart( {
					val: num,
					// todo 需要修正 缺接口
					max: num * 2,
				} )
			} )
		},
		getEveryStatic () {
			// 查询各科室使用存储量
			getEveryStatic().then( res => {
				console.log( res )
				if ( res.code === 0 ) {
					// 环形图
					// this.chartRingObj.data = res.data
					res.data.map( item => item.used_size = ( item.used_size / 1024 ).toFixed( 2 ) * 1 )
					this.getRingChart( res.data )
					let waterVal = objSum( res.data, 'used_size' ).used_size
					console.log( waterVal )
					// 水波图
					this.getWaterChart( {
						val: waterVal,
						// todo 后续可能需要接口
						max: waterVal * 2,
					} )
				}
			} )
		},
		getDepartCount () {
			// 各depart_name检查数据
			getDepartCount( { org_code: this.org_code } ).then( res => {
				console.log( res )
				if ( res.code === 0 ) {
					// 直方图
					this.getBarChart( res.data )
				}
			} )
		},
		getWaterChart ( data ) {
			// 水波图
			console.log( data );
			const liquidPlot = new Liquid( document.getElementById( 'c1' ), {
				title: {
					visible: true,
					text: '存储使用容量',
				},
				description: {
					visible: true,
					text: '单位:(TB)',
				},
				liqiudStyle: {
					lineWidth: 3,
					stroke: '#6592f9',
					fill: '#6592f9',
				},
				min: 0,
				max: data.max,
				value: data.val,
				color: '#7094f9',
			} )
			liquidPlot.render()
		},
		getColumnChart ( data ) {
			const columnPlot = new Column( document.getElementById( 'c2' ), {
				title: {
					visible: true,
					text: '存储域使用容量',
				},
				description: {
					visible: true,
					text: '单位:TB',
				},
				forceFit: true,
				padding: 'auto',
				data: data,
				xField: 'domain_name',
				yField: 'used_size',
				meta: {
					domain_name: { alias: '存储域' },
					used_size: { alias: '存储量' },
				},
				label: {
					visible: true,
					style: {
						fill: '#333333',
						fontSize: 18,
						fontWeight: 500,
						opacity: 1,
					},
				},
				xAxis: {
					visible: true,
					grid: { visible: false },
					title: { visible: false },
					line: {
						visible: 'true',
						style: {
							stroke: '#ddd',
							lineDash: [ 0, 0 ],
						},
					},
				},
				yAxis: {
					visible: true,
					formatter: v => Math.round( v / 1024 ),
					title: { visible: false },
					grid: {
						visible: true,
						style: {
							stroke: '#ddd',
							lineDash: [ 0, 0 ],
						},
					},
					line: {
						visible: true,
						style: {
							stroke: '#ddd',
							lineWidth: 1,
						},
					},
					tickLine: {
						visible: true,
						style: {
							stroke: '#ddd',
							lineWidth: 1,
						},
					},
					label: {
						visible: true,
						style: { fill: '#999' },
					},
				},
				columnSize: 40,
				color: [ '#1C8BE4' ],
			} )

			columnPlot.render()
		},
		getBarChart ( data ) {
			const barPlot = new Bar( document.getElementById( 'c4' ), {
				title: {
					visible: true,
					text: '各科室检查数据数量',
				},
				description: {
					visible: true,
					text: '单位:TB',
				},
				forceFit: true,
				data: data,
				xField: 'count',
				yField: 'depart_name',
				meta: {
					depart_name: { alias: '科室' },
					count: { alias: '检查量' },
				},
				xAxis: {
					title: { visible: false },
					// formatter: v => `${ ( v / 10000 ).toFixed( 2 ) + '万' }`,
				},
				yAxis: { title: { visible: false } },
				description: {
					visible: true,
					text: '单位:(次)',
				},
				columnSize: 40,
				label: {
					visible: true,
					position: 'right',
					adjustColor: false,
					style: {
						fill: '#333333',
						fontSize: 18,
						fontWeight: 500,
						opacity: 1,
					},
				},
			} )

			barPlot.render()
		},
		getRingChart ( data ) {
			const donutPlot = new Donut( document.getElementById( 'c3' ), {
				forceFit: true,
				title: {
					visible: true,
					text: '各科室使用存储容量',
				},
				description: {
					visible: true,
					text: '单位: TB',
				},
				meta: {
					used_size: {
						alias: '容量',
						// formatter: v => `${ ( v / 1024 ).toFixed( 2 ) }`,
					}
				},
				radius: 0.9,
				innerRadius: 0.53,
				padding: 'auto',
				data: data,
				angleField: 'used_size',
				colorField: 'depart_name',
				meta: {
					angleField: {
						alias: '数量',
						formatter: ( v ) => { return Math.round( v ) }
					},
					label: {
						type: 'spider'
					}
				},
				legend: {
					visible: true,
					position: 'top-left',
					flipPage: true,
					offestY: 30,
				},
				label: {
					visible: true,
					type: 'spider',
				},
			} );
			donutPlot.render();
		}
	},
}
</script>

<style scoped lang="less">
.container {
	background-color: #f7f7f7;
	.chart {
		// margin-top: 10px;
		.item {
			margin-top: 10px;
			text-align: center;
			border: 1px solid #ffffff;
			background-color: #fff;
		}
	}
	.chart_l {
		margin-right: 10px;
	}
	.water_title {
		position: absolute;
		left: 100px;
		bottom: 48%;
		left: 45%;
	}
}
</style>
